:root {
  /* Mermaid Options */
  --mermaid-theme: default; /*or base, dark, forest, neutral, night */
  --mermaid-font-family: 'Roboto', 'Pingfang TC', sans-serif;
  --mermaid-sequence-numbers: on; /* or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
  --mermaid-flowchart-curve: basis /* or "basis", see https://github.com/typora/typora-issues/issues/1632*/;
  --mermaid--gantt-left-padding: 75; /* see https://github.com/typora/typora-issues/issues/1665*/
}

html {
  font-size: 18px;
  @apply !subpixel-antialiased
}

body {
  @apply
  bg-emerald-100
  font-light !text-stroke-0.015rem !text-stroke-current
  leading-relaxed tracking-wide
  ;

  color: rgba(0, 0, 0, 0.7);
  font-family: 'Roboto', 'Pingfang TC', sans-serif;
}

svg {
  font-family: 'Roboto', 'Pingfang TC', sans-serif;
}

::selection {
  @apply text-white text-opacity-75 bg-neutral-400;
}

strong, th, b, .md-header-span, .md-blockmeta {
  @apply !font-medium !text-stroke-0.025rem;
}

th {
  font-size: 0.9em;
}

th, td {
  @apply px-2 py-1
}

.md-heading, h1, h2, h3, h4, h5, h6, .md-toc-h1 .md-toc-inner {
  @apply !font-medium !text-stroke-0.035rem
}

code, pre, kbd {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Pingfang TC', sans-serif;
}

code {
  font-size: 0.85em;
  vertical-align: baseline;
  @apply
  bg-green-600 text-green-50
  px-0.25em rounded-0.25em pb-0.1em
  mx-0.25em
  ;
}

kbd {
  font-size: 0.85em;
  vertical-align: baseline;
  box-shadow: none;
  border: none;
  @apply
  bg-sky-600 text-sky-50
  px-0.25em rounded-0.25em pb-0.1em
  mx-0.25em
  ;
}

a {
  color: rgba(0, 0, 0, 0.7);
  @apply
  !no-underline !hover:no-underline
  text-amber-600 hover:text-amber-700
  ;

}

#write {
  /*width: 90%;*/
  /*max-width: 48rem;*/
  /*@apply p-0 py-8*/
  max-width: 960px;
}

.md-table-fig {
  background-color: rgba(255, 255, 255, 0.25);
  border: 2px solid;
  /*border-top: 2px solid;*/
  /*border-bottom: 2px solid;*/
  @apply border-teal-500;

  @apply
  /*py-0.25em*/
  rounded-0.5em
  ;
}

th, td {
  padding: 0.5em;
}

table tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.25);
}

table tr th {
  @apply font-light !text-stroke-0.025rem text-white text-opacity-75;
  /*border-radius: 0.5em;*/
  @apply bg-teal-500;
}

blockquote {
  background-color: rgba(255, 255, 255, 0.25);
  border-left: 2px solid;
  @apply border-sky-500

  @apply
  p-2 px-4
  rounded-0.5em
  ;
}

input[type='checkbox'] {
  @apply accent-green-600
}

.CodeMirror-scroll {
  background-color: rgba(255, 255, 255, 0.25);
  border-left: 2px solid;
  @apply border-green-500

  @apply
    py-0.25em px-0.25em
    rounded-0.5em
  ;
}

.CodeMirror-gutters {
  background-color: transparent;
  @apply
    border-none
  ;
}

.CodeMirror-sizer {
  background-color: rgba(255, 255, 255, 0.25);
  @apply
    rounded-0.5em
  ;
}

.CodeMirror-linenumber {
}

.md-blockmeta {
  @apply text-green-500
}

.md-meta {
  @apply text-green-400
}

h1, [mdlike='h1'] {
  @apply text-4xl
}

h1 {
  @apply text-green-700;
  @apply mt-4 my-8;
}

/*h1::after, [mdlike='h1']::after {*/
/*  content: '';*/
/*  display: block;*/
/*  height: 2px;*/
/*  width: 100%;*/
/*  margin-top: 0.5rem;*/
/*  @apply bg-green-400*/
/*}*/

h1 a {
  @apply text-green-700 hover:text-green-900
}

[mdlike='h1'] a {
  @apply text-green-700 hover:text-green-900
}

h2, h3, h4, h5, h6 {
  @apply text-green-700;
}

/* sidebar */

#typora-sidebar {
  @apply bg-green-700;

}

/* file list */
.info-panel-tab {
  @apply !text-green-100 !font-light
}

.file-list-item {
  @apply
  border-black border-opacity-15
  text-white text-opacity-50
  !px-1em
  ;
}

.file-list-item.active {
  @apply bg-black bg-opacity-50 font-light !text-stroke-0.015rem text-white text-opacity-50;
}

.file-list-item-file-name-part {
  font-size: 16px;
  @apply font-light !text-stroke-0.025rem text-white text-opacity-85;
}

/* toc */
.outline-content {
  @apply px-2
}

.outline-item-wrapper {
  font-size: 16px;
  @apply font-light !text-stroke-0.025rem text-green-100 text-opacity-40;
}

.outline-item {
  @apply py-2 hover:bg-black hover:bg-opacity-50 !hover:no-underline
}

.outline-label {
  @apply !hover:no-underline
}

.outline-active {
  @apply !font-light text-white text-opacity-65;
}

/* file tree */

#file-library-tree {
  padding: 0;
}

.file-node-content {
  font-size: 16px;
  @apply
    font-light !text-stroke-0.025rem text-green-100 text-opacity-40
    hover:text-green-200
    hover:cursor-pointer
  ;
  /*@apply flex items-center*/
}

.file-node-icon {
  @apply mr-0.5em
}

.file-tree-node.active > .file-node-background {
  @apply !bg-black !bg-opacity-50 !hover:no-underline !border-none

}

.file-tree-node.active > .file-node-content {
  @apply font-light !text-stroke-0.025rem text-green-100 text-opacity-60
}

/* sidebar footer */
.sidebar-footer {
  @apply border-black border-opacity-20
}

pre.md-fences-advanced.md-focus .md-fences-adv-panel {
  @apply border-lime-500 bg-lime-200 bg-opacity-25;
  border-width: 0 0 2px 0;
  /*background-color: rgba(255, 255, 255, 0.25);*/
  @apply
    p-0.25em
    rounded-0.5em
  ;
}

pre.md-fences-advanced.md-focus .md-fences-adv-panel .md-diagram-panel-preview {
  border-width: 0;
  @apply
    rounded-0.25em
  ;
}

.md-diagram-panel-preview {
  background-color: rgba(255, 255, 255, 0.25);
  border-bottom: 2px solid transparent;
  @apply border-lime-500;
  @apply
    rounded-0.5em
  ;
}

hr {
  border: none;
  height: 0.1em;
  margin: 2em 0;
  /*@apply bg-gradient-to-r from-green-500 to-emerald-100;*/
  background-image: linear-gradient(to right, #d1fae5, #10b981, #d1fae5);
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

hr::after {
  content: '§';
  display: inline-flex;
  position: absolute;
  /*line-height: 2;*/
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  padding: 0 1em;
  font-size: 1.25em;
  justify-content: center;
  align-items: center;
  /*background-color: red;*/
  @apply bg-emerald-100 text-emerald-600 !text-stroke-0.025rem;
}
